<!--
 * @Description: 第十五章（全局组件，局部组件，递归组件） 递归组件
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-16 00:04:10
-->
<template>
  <div>
    <p>递归组件</p>
    <div>
      <p></p>
      <div @click.stop="clickTap(item, $event)" class="tree" v-for="item in data">
        <input type="checkbox" v-model="item.checked" /> <span>{{ item.name }}</span>
        <Tree v-if="item?.children?.length" :data="item.children"></Tree>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'

interface Tree {
  name: string
  checked: boolean
  children?: Tree[]
}

defineProps<{
  data?: Tree[]
}>()

const clickTap = (item: Tree, e) => {
  console.log('clickTap item: ', item, ' event target: ', e.target)
}
</script>
<style scoped lang="less">
.tree {
  margin-left: 10px;
}
</style>
